<template>
  <wd-popup v-model="visible" position="bottom" :style="{ height: '60%' }">
    <view class="expense-detail">
      <view class="detail-header">
        <text class="detail-title">支出详情</text>
        <wd-icon name="close" size="20px" @click="close"></wd-icon>
      </view>

      <view class="detail-content" v-if="expense">
        <view class="amount-section">
          <text class="amount-label">支出金额</text>
          <text class="amount-value">¥{{ formatAmount(expense.amount) }}</text>
        </view>
        
        <view class="detail-section">
          <view class="detail-item">
            <view class="item-label">
              <expense-category-icon :icon-name="expense.category"></expense-category-icon>
              <text>分类</text>
            </view>
            <text class="item-value">{{ getCategoryName(expense.category) }}</text>
          </view>
          
          <view class="detail-item">
            <view class="item-label">
              <wd-icon name="description" size="16px" color="#666"></wd-icon>
              <text>描述</text>
            </view>
            <text class="item-value">{{ expense.description }}</text>
          </view>
          
          <view class="detail-item">
            <view class="item-label">
              <wd-icon name="calendar" size="16px" color="#666"></wd-icon>
              <text>日期</text>
            </view>
            <text class="item-value">{{ formatDate(expense.date) }}</text>
          </view>
          
          <view class="detail-item" v-if="expense.remark">
            <view class="item-label">
              <wd-icon name="comment" size="16px" color="#666"></wd-icon>
              <text>备注</text>
            </view>
            <text class="item-value">{{ expense.remark }}</text>
          </view>
        </view>
      </view>

      <view class="detail-footer">
        <wd-button type="info" size="large" @click="editExpense">编辑</wd-button>
        <wd-button type="danger" size="large" @click="deleteExpense">删除</wd-button>
      </view>
    </view>
  </wd-popup>
</template>

<script>
import { EXPENSE_CATEGORIES } from '../stores/expense.js'
import ExpenseCategoryIcon from './ExpenseCategoryIcon.vue'

export default {
  name: 'ExpenseDetail',
  components: {
    ExpenseCategoryIcon
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    expense: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      visible: false
    }
  },
  watch: {
    show(val) {
      this.visible = val
    },
    visible(val) {
      this.$emit('update:show', val)
    }
  },
  methods: {
    close() {
      this.visible = false
    },
    editExpense() {
      this.$emit('edit', this.expense)
    },
    deleteExpense() {
      uni.showModal({
        title: '确认删除',
        content: '确定要删除这条支出记录吗？',
        success: (res) => {
          if (res.confirm) {
            this.$emit('delete', this.expense)
            this.close()
          }
        }
      })
    },
    formatAmount(amount) {
      return amount.toFixed(2)
    },
    formatDate(dateStr) {
      const date = new Date(dateStr)
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      const hours = String(date.getHours()).padStart(2, '0')
      const minutes = String(date.getMinutes()).padStart(2, '0')
      
      return `${year}-${month}-${day} ${hours}:${minutes}`
    },
    getCategoryName(categoryId) {
      const category = EXPENSE_CATEGORIES.find(c => c.id === categoryId)
      return category ? category.name : '未分类'
    }
  }
}
</script>

<script setup>
// Vue 3 setup script
</script>

<style lang="scss" scoped>
.expense-detail {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #fff;
  border-radius: 16px 16px 0 0;
}

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #eee;
  
  .detail-title {
    font-size: 18px;
    font-weight: 500;
    color: #333;
  }
}

.detail-content {
  flex: 1;
  padding: 15px;
  overflow-y: auto;
}

.amount-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
  margin-bottom: 20px;
  background-color: #FFF9F0;
  border-radius: 8px;
  
  .amount-label {
    font-size: 14px;
    color: #666;
    margin-bottom: 8px;
  }
  
  .amount-value {
    font-size: 28px;
    font-weight: 600;
    color: #FF8C00;
  }
}

.detail-section {
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #f5f5f5;
  
  &:last-child {
    border-bottom: none;
  }
  
  .item-label {
    display: flex;
    align-items: center;
    color: #666;
    font-size: 14px;
    
    .wd-icon, .category-icon {
      margin-right: 8px;
    }
  }
  
  .item-value {
    font-size: 14px;
    color: #333;
    text-align: right;
    flex: 1;
    margin-left: 10px;
  }
}

.detail-footer {
  display: flex;
  justify-content: space-between;
  padding: 15px;
  border-top: 1px solid #eee;
  
  .wd-button {
    flex: 1;
    margin: 0 5px;
  }
}
</style>